:root {
    --white: #fff;
    --black: #000;

    --sb-track-bg: rgba(#101F1C, 0.1);
    --sb-thumb-bg: rgba(144, 147, 153, .1);
    --sb-thumb-bg-hover: rgba(144, 147, 153, .3);
}

* {
    padding: 0;
    margin: 0
}

html {
    font-size: 4px;
    /* font-size: calc(100vw / 1920 * 4); */
}

@media screen and (min-width:1900px) {
    html {
        font-size: calc(100vw / 1920 * 4);
    }
}


/* 滚动条优化 */
/* 为滚动条整体设置样式 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* 为滚动条的轨道设置样式 */
::-webkit-scrollbar-track {
    background: var(--scroll-bar-bg);
    border-radius: 6px;
}

/* 为滚动条的滑块设置样式 */
::-webkit-scrollbar-thumb {
    background-color: var(--sb-thumb-bg);
    border-radius: 6px;
    transition: background-color .3s;
    cursor: pointer;
}

/* 当鼠标悬停在滑块上时改变滑块的颜色 */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--sb-thumb-bg-hover);
}

// .title[data-title] {
//     position:relative;
//     // 样式：
//     &:hover { 
//         &::after{
//             opacity: 1;
//             transition: all 0.1s ease 0.5s;
//             visibility: visible;
//         }

//     }
//     // 具体控制title背景的样式 位置 字体等
//     &::after {
//         content: attr(data-title);
//         background-color: rgba(167, 163, 163, 0.8);
//         color: rgb(22, 22, 22);
//         font-size: 12px;
//         position: absolute;
//         padding: 4px 10px;
//         left: 20px;
//         bottom: -1.5em;
//         border-radius: 4px;
//         white-space: nowrap;
//         box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
//         z-index: 999;
//         visibility: hidden;
//         opacity: 0;
//       }
// }


// .border-shadow-1 {box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
// .border-shadow-2 {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
// .border-shadow-3 {box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;}
// .border-shadow-4 {box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
// .border-shadow-5 {box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
// .border-shadow-6 {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
// .border-shadow-7 {box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
// .border-shadow-8 {box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
// .border-shadow-9 {box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;}
// .border-shadow-10 {box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;}
// .border-shadow-11 {box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;}
// .border-shadow-12 {box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
// .border-shadow-13 {box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;}
// .border-shadow-14 {box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;}